<template>
  <el-dialog
    v-model="visible"
    title="接单详情"
    width="900px"
    append-to-body
    class="take-order-detail-dialog"
    @open="open"
    @close="close"
  >
    <div v-loading="loading" class="take-order-detail">
      <!-- 订单信息 -->
      <div class="info-section">
        <div class="section-header">
          <el-icon><Document /></el-icon>
          <span>订单信息</span>
        </div>
        <el-descriptions :column="2" border class="custom-descriptions">
          <el-descriptions-item label="订单编号" :span="2">
            {{ takeOrderDetail.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getOrderStatusTagType(takeOrderDetail.status)" size="medium">{{ getOrderStatusText(takeOrderDetail.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="下单电话">
            <el-icon><Phone /></el-icon>
            {{ takeOrderDetail.concatPhone}}
          </el-descriptions-item>
          <el-descriptions-item label="订单备注">
            <el-icon><Document /></el-icon>
            {{ takeOrderDetail.remark}}
          </el-descriptions-item>
          <el-descriptions-item label="下单时间" min-width="200px">
            <el-icon><Clock /></el-icon>
            {{ takeOrderDetail.createTime}}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 预约信息 -->
      <div class="info-section">
        <div class="section-header">
          <el-icon><Calendar /></el-icon>
          <span>预约信息</span>
        </div>
        <el-descriptions :column="2" border class="custom-descriptions">
          <el-descriptions-item label="项目名称">
            <el-icon><Service /></el-icon>
            {{ takeOrderDetail.itemName}}
          </el-descriptions-item>
          <el-descriptions-item label="医院名称">
            <el-icon><OfficeBuilding /></el-icon>
            {{ takeOrderDetail.itemHospitalName}}
          </el-descriptions-item>
          <el-descriptions-item label="期望就诊时间">
            <el-icon><Clock /></el-icon>
            {{ takeOrderDetail.serviceTime}}
          </el-descriptions-item>
          <el-descriptions-item label="就诊人名称">
            <el-icon><User /></el-icon>
            {{ takeOrderDetail.itemPatientName}}
          </el-descriptions-item>
          <el-descriptions-item label="就诊人电话">
            <el-icon><Phone /></el-icon>
            {{ takeOrderDetail.itemPatientPhone}}
          </el-descriptions-item>
          <el-descriptions-item label="其它需求">
            <el-icon><ChatDotRound /></el-icon>
            {{ takeOrderDetail.demand}}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 服务信息（只有服务开始时间存在时才显示） -->
      <div v-if="takeOrderDetail.startTime" class="info-section">
        <div class="section-header">
          <el-icon><Timer /></el-icon>
          <span>服务信息</span>
        </div>
        <el-descriptions :column="2" border class="custom-descriptions">
          <el-descriptions-item label="服务开始时间">
            <el-icon><Clock /></el-icon>
            {{ takeOrderDetail.startTime }}
          </el-descriptions-item>
          <el-descriptions-item label="服务结束时间">
            <el-icon><Clock /></el-icon>
            {{ takeOrderDetail.endTime}}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 收益信息 -->
      <div class="info-section" v-if="takeOrderDetail.status !== 3">
        <div class="section-header" >
          <el-icon><Money /></el-icon>
          <span>收益信息</span>
        </div>
        <el-descriptions :column="1" border class="custom-descriptions">
          <el-descriptions-item :label="takeOrderDetail.status === 2 ? '订单收益' : '预计收益'">
            <el-icon><Money /></el-icon>
            <span class="amount-text income-amount">¥{{ centsToYuan(takeOrderDetail.expectedIncome) }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-dialog>
</template>

<script setup name="TakeOrderDetailDialog">
import { getTakeOrder } from "@/api/takeOrder/takeOrder";
import { centsToYuan } from '@/utils/money'

const props = defineProps({
  detailDialogVisible: {
    type: Boolean,
    default: false
  },
  orderId: {
    type: [String, Number],
    default: null
  }
});

const emit = defineEmits(['handleClose']);
const visible = ref(false);
watch(
  () => props.detailDialogVisible,
  (val) => {
    visible.value = val;
  }
);

const loading = ref(false);
const takeOrderDetail = ref({});

// 获取接单详情
const getTakeOrderDetail = () => {
  loading.value = true;
  getTakeOrder(props.orderId).then(res => {
    takeOrderDetail.value = res.data;
  }).finally(() => {
    loading.value = false;
  });
};

const open = () => {
  getTakeOrderDetail();
};

const close = () => {
  visible.value = false;
  emit('handleClose');
};  

// 订单状态映射
const getOrderStatusText = (status) => {
  const statusMap = {
    1: '待服务',
    2: '已完成',
    3: '已取消'
  }
  return statusMap[status] || '--';
}

// 订单状态标签类型
const getOrderStatusTagType = (status) => {
  const statusMap = {
    1: 'primary',
    2: 'success',
    3: 'danger'
  }
  return statusMap[status] || 'info';
}
</script>

<style scoped>
.take-order-detail-dialog {
  border-radius: 12px;
}

.take-order-detail {
  max-height: 600px;
  overflow-y: auto;
  padding: 0 10px;
}

.info-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.section-header .el-icon {
  margin-right: 12px;
  font-size: 18px;
  vertical-align: baseline;
  position: relative;
  top: 2px;
}

.custom-descriptions {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:deep(.custom-descriptions .el-descriptions__label) {
  font-weight: 600;
  color: #606266;
  background-color: #f8f9fa;
  width: 120px;
}

:deep(.custom-descriptions .el-descriptions__content) {
  color: #303133;
  background-color: #ffffff;
}

:deep(.custom-descriptions .el-descriptions-item__content) {
  display: flex;
  align-items: flex-start;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-all;
}

:deep(.custom-descriptions .el-descriptions-item__content .el-icon) {
  margin-right: 8px;
  color: #409eff;
  vertical-align: baseline;
  position: relative;
  top: 1px;
  flex-shrink: 0;
}

.amount-text {
  font-weight: 600;
  color: #67c23a;
  font-size: 15px;
  margin-left: 5px;
}

.income-amount {
  font-size: 18px;
  color: #e6a23c;
  font-weight: bold;
}

.dialog-footer {
  text-align: center;
  padding: 16px 0;
}

.dialog-footer .el-button {
  padding: 10px 24px;
  border-radius: 6px;
}

/* 滚动条样式 */
.take-order-detail::-webkit-scrollbar {
  width: 6px;
}

.take-order-detail::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.take-order-detail::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.take-order-detail::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 通用图标对齐修复 */
:deep(.el-icon) {
  vertical-align: baseline;
  position: relative;
  top: 1px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .take-order-detail-dialog {
    width: 95% !important;
    margin: 0 auto;
  }
  
  .section-header {
    font-size: 14px;
    padding: 10px 12px;
  }
  
  :deep(.custom-descriptions .el-descriptions__label) {
    width: 100px;
  }
}
</style>
